<template>
   <div class="searchArea">
        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="search-ruleForm">
            <form-item :onSearch="onSearch" v-for="configItem in userConfig" :data="configItem" :key="configItem.name" :type="configItem.type"/>
        </el-form>
  </div>
</template>
<script lang="ts">
import { Component, Vue,Prop} from 'vue-property-decorator';
import FormItem from "@/common/form-item/index.vue";
@Component({
  components: {
      FormItem
  },
})
export default class SearchArea extends Vue {
     @Prop() private userConfig!: any;
     @Prop() onSearch:any;
     private ruleForm:any={};
     private rules=[];
     async created(){

     }
}
</script>
<style lang="less">
    .searchArea{
         display: flex;
         flex-wrap: wrap;
         font-size: 14px;
         .el-form-item{
             display: flex;
         }
        .el-form-item__content{
            margin-left: 0px!important;
            width: calc(100%-100px);
        }
        .search-ruleForm{
            display: flex;
            flex-wrap: wrap;
        }
         .el-input__inner{
            height: 30px;
            line-height: 30px;
         }
        .formInput{
            width: 30%;
            height: 34px;
            margin-left:0px;
            display: flex;
            align-items: center;
            float: left;
            margin-top: 5px;
        }
        .el-form-item{
            margin-bottom: 0px;
        }
        .el-select{
            .el-input__inner{
                  width: calc(100% - 15px);
            }
            .el-input__suffix{
                right: 18px;
            }
        }
        .el-form-item__label{
            font-size: 12px;
        }
        .formButton{
            display: flex;
            align-items:center;
            margin-top: 8px;
            .el-button--small{
                 padding: 7px 15px;
             }
        }
    }
</style>
